<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
     计算属性和监听器
    1.  使用插值语法时可以调用对象的相关api  split("")  reverse()  join("")
    2. 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护


实现字符串的翻转实现方案:
  1.  插值语法中使用String对象方法的调用    不推荐
  2.  methods中定义实现字符串翻转的函数   reverseMessageInMethods
  3. 使用计算属性实现字符串翻转    vue中可以通过配置computed选项定义计算属性

 计算属性 vs 方法:

 1.两种方式的最终结果确实是完全相同的。
 2.然而，不同的是计算属性是基于它们的响应式依赖进行缓存的   message  响应式依赖  参与计算的data中的属性
 3.只在相关响应式依赖发生改变时它们才会重新求值。
 4.这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数

-->
<div id="app">
    <p>original message:{{message}}</p>
    <p>reverse message:{{message.split("").reverse().join("")}}</p>
    <hr>
    <p>reverse message in methods:{{reverseMessageInMethods()}}</p>
    <p>reverse message in methods:{{reverseMessageInMethods()}}</p>
    <hr>
    <p>reverse message in computed:{{reverseMessageInComputed}}</p>
    <p>reverse message in computed:{{reverseMessageInComputed}}</p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue'
        },
        methods: {
            reverseMessageInMethods() {   //  翻转字符串
                console.log("reverseMessageInMethods")
                return this.message.split('').reverse().join('')
            }
        },
        computed: {   //  定义计算属性

            // reverseMessageInComputed:function (){
            //     console.log("reverseMessageInComputed")
            //     return this.message.split('').reverse().join('')
            // }

            reverseMessageInComputed(){
                console.log("reverseMessageInComputed")
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

</body>
</html>